<template>
  <!-- 弹出表单 -->
  <el-dialog title="添加课时" :visible.sync="visible" width="30%">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="80px"
      class="demo-ruleForm"
      style="width: 500px"
    >
      <el-form-item label="课时名称" prop="periodName">
        <el-input v-model="ruleForm.periodName"></el-input>
      </el-form-item>
      <el-form-item label="是否免费" prop="isFree">
        <el-radio-group v-model="ruleForm.isFree">
          <el-radio :label="1">免费</el-radio>
          <el-radio :label="0">收费</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="原价"
        prop="periodOriginal"
        v-if="ruleForm.isFree == 0"
      >
        <el-input v-model="ruleForm.periodOriginal"></el-input>
      </el-form-item>
      <el-form-item
        label="优惠价"
        prop="periodDiscount"
        v-if="ruleForm.isFree == 0"
      >
        <el-input v-model="ruleForm.periodDiscount"></el-input>
      </el-form-item>
      <el-form-item label="课时简介" prop="periodDesc">
        <el-input type="textarea" v-model="ruleForm.periodDesc"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input-number
          v-model="ruleForm.sort"
          :min="1"
          :max="1000"
          label="排序"
        >
        </el-input-number>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >保存</el-button
        >
        <el-button @click="visible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
// import * as addapi from "@/api/period.js";
export default {
  name: "addperiod",
  data() {
    return {
      visible: false,
      flag: 0,
      ruleForm: {
        periodName: "",
        periodDesc: "",
        sort: "",
        isFree: 1,
        periodOriginal: "",
        periodDiscount: "",
        courseId: "1",
        chapterId: "1",
      },
      //表单验证
      rules: {
        periodName: [
          { required: true, message: "请输入课时名", trigger: "blur" },
        ],
        periodDesc: [
          { required: true, message: "请输入课时描述", trigger: "blur" },
        ],
        periodOriginal: [
          { required: true, message: "请输入原价", trigger: "blur" },
        ],
        periodDiscount: [
          { required: true, message: "请输入优惠价", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    submitForm(formname) {
      this.$refs[formname].validate((valid) => {
        if (valid) {
          addapi.savePeriod(this.ruleForm);
          this.visible = false;
        } else {
          console.log("error submit!");
          return false;
        }
      });
    },
    open() {
      this.visible = true;
      this.flag = 0;
    },
  },
};
</script>
<style scoped>
.el-form-item {
  width: 70%;
}
</style>
